<template>
	<view class="detail">
		<view v-for="item in listArr" :key="item._id" v-if="flag">
			<view class="title">
				{{item.title}}
			</view>
			<view class="info">
				<text>{{item.author}}</text>
				<uni-dateformat :date="item.posttime" :threshold="[60000,3600000]" format="MM-dd"></uni-dateformat>
			</view>
			<view class="content">
				{{item.content}}
			</view>
			<!-- 图片渲染 点击图片可预览 -->
			<image v-for="(item1, index) in item.Image" :key="index" :src="item1" @click="preview(item1)"
				mode="aspectFill"></image>
			<q-previewImage ref="previewImage" :urls="item.Image" @onLongpress="onLongpress"></q-previewImage>

			<!-- 分隔框 -->
			<view class="black"></view>

			<!-- 评论区 -->
			<view class="comments">
				<view class="select">
					<uni-section type="line">
						<view class="uni-padding-wrap uni-common-mt">
							<uni-segmented-control :current="current" :values="items" :style-type="styleType"
								:active-color="activeColor" @clickItem="onClickItem" />
						</view>
						<view class="content">
							<view v-if="current === 0"><text class="content-text">选项卡1的内容</text></view>
							<view v-if="current === 1"><text class="content-text">选项卡2的内容</text></view>
						</view>
					</uni-section>
				</view>
				<!-- 评论显示区域 -->
				<view class="ContentDisplay">
					<uni-icons type="chat" size="200" color="#e5e5e5"></uni-icons>
					<p style="color: #e5e5e5; font-size: 40rpx;">什么都没有</p>
				</view>
				<view class="btnGroup">
					<div>
						<input type="text" name="title" placeholder="说点什么..." />
						<uni-icons type="heart" :size="30" color="#777" v-if="onlikeshow"
							@click="onLike(item._id,item.author)" />
						<uni-icons type="heart-filled" :size="30" color="#777" v-else
							@click="onLike(item._id,item.author)" />
						<uni-icons type="chatbubble" :size="30" color="#777" />
						<uni-icons type="redo" :size="30" color="#777" />
					</div>
				</view>
			</view>
		</view>
		<view v-else>
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				//本条文章所有参数
				listArr: [],
				//蒙层设置
				flag: false,
				items: ['最新', '最热'],
				//爱心是否点亮
				onlikeshow: true,
				//点赞数量计数器
				stockpile: '',
				//喜欢文章id
				lickArr: [],
				//当前喜欢的文章的位置
				likenum: ''
			}
		},
		onLoad(e) {
			this.getData(e)
		},
		computed: mapState(['hasLogin', 'uerInfo']),
		methods: {
			//点击喜欢事件
			onLike(e1, e2) {
				this.onlikeshow = !this.onlikeshow
				//对数据表进行操作
				if (this.onlikeshow) {
					//取消喜欢时触发
					this.stockpile -= 1
					uniCloud.callFunction({
						name: 'setNum',
						data: {
							id: e1,
							num: this.stockpile
						}
					}).then(res => {
						//取消喜欢时对 user 表中的 like 进行删除操作
						this.lickArr.splice(this.likenum, 1)
						console.log(this.likenum)
						uniCloud.callFunction({
							name: 'setUser',
							data: {
								aname: this.uerInfo.userName,
								like: this.lickArr
							}
						}).then(res => {

							console.log(res)
						})
						console.log(res)
					})


				} else {
					if (this.uerInfo.userName) {
						//喜欢时触发
						//每触发一次都会在原来的基础上加一
						this.stockpile += 1
						uniCloud.callFunction({
							name: 'setNum',
							data: {
								id: e1,
								num: this.stockpile
							}
						}).then(res => {
							//追加数组
							let oldlike = this.lickArr
							this.lickArr = [...oldlike, e1]
							//对用户表进行操作
							uniCloud.callFunction({
								name: 'setUser',
								data: {
									aname: this.uerInfo.userName,
									like: this.lickArr
								}
							}).then(res => {
								console.log(res)
							})
							console.log(res)
						})
					} else {
						this.onlikeshow =!this.onlikeshow
						//未登录时间不能点赞
						uni.navigateTo({
							url: '/pages/onlogin/onlogin'
						})
					}

				}


			},
			//点击查看图片
			preview(url) {
				this.$nextTick(() => {
					this.$refs.previewImage[0].open(url)
				})
				this.$refs.previewImage[0].open(url);
			},
			//长按图片事件
			onLongpress(e) {
				console.log('当前长按的图片是' + e);
				uni.showActionSheet({
					itemList: ['转发给朋友', '保存到手机'],
					success: function(res) {
						if (res.tapIndex + 1 == 2) {
							uni.downloadFile({
								url: e,
								success: (res) => {
									if (res.statusCode === 200) {
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												uni.showToast({
													title: "保存成功",
													icon: "none"
												});
											},
											fail: function() {
												uni.showToast({
													title: "保存失败，请稍后重试",
													icon: "none"
												});
											}
										});
									}
								}
							})
						}
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			//获取数据事件
			getData(id) {
				uniCloud.callFunction({
					name: 'setData',
					data: id
				}).then(res => {
					this.listArr = res.result.data
					//当页面内容全部加载完成后改  flag  为	  true  进入页面
					setTimeout(() => {
						this.flag = true
					}, 400)


					//将num的值赋给stockpile，便于数据反复操作
					this.stockpile = res.result.data[0].num

					//喜欢按钮加载时点亮
					uniCloud.callFunction({
						name: 'user',
						data: {
							aname: this.uerInfo.userName
						}
					}).then(res1 => {
						this.lickArr = res1.result.data[0].like
						//循环验证是否存在此条文章的收藏
						for (let i = 0; i < this.lickArr.length; i++) {
							if (this.lickArr[i] == id.id) {
								this.onlikeshow = false
								this.likenum = i
								break
							}
						}
						console.log(res1.result.data[0].like)
						console.log(id.id)
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		padding: 20rpx;

		.title {
			width: 100%;
			text-align: justify;
			font-size: 50rpx;
		}

		.info {
			font-size: 28rpx;
			color: #888;
			padding: 30rpx 0 60rpx;

			text {
				margin-right: 20rpx;
			}
		}

		.content {
			font-size: 36rpx;
			line-height: 1.4em;
		}

		.black {
			width: 100%;
			height: 50rpx;
			background-color: #aaaaaa;
		}

		.btnGroup {
			display: flex;
			width: 100%;
			box-sizing: border-box;
			bottom: 1rpx;
			right: 1rpx;
			box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
			padding: 10rpx 30rpx;

			input {
				border: 1px solid #eee;
				border-radius: 40rpx;
				height: 80rpx;
				padding: 0 20rpx;
			}

			div {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			position: fixed;
		}

		image {
			width: 100%;
			display: block;
			margin-bottom: 20rpx;

		}

		.select {
			height: 80rpx;
			border-bottom: 1rpx solid #eee;
		}

		.comments {
			.ContentDisplay {
				width: 100%;
				text-align: center;
			}

			.example-body {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: row;
				padding: 0;
			}

			.uni-common-mt {
				margin-top: 3px;
			}

			.uni-padding-wrap {
				width: 20%;
			}

			.content {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;
				height: 150px;
				text-align: center;
			}

			.content-text {
				font-size: 14px;
				color: #666;
			}

			.color-tag {
				width: 25px;
				height: 25px;
			}

			.uni-list {
				flex: 1;
			}

			.uni-list-item {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex: 1;
				flex-direction: row;
				background-color: #FFFFFF;
			}


			.uni-list-item__container {
				padding: 12px 15px;
				width: 100%;
				flex: 1;
				position: relative;
				/* #ifndef APP-NVUE */
				display: flex;
				box-sizing: border-box;
				/* #endif */
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				border-bottom-style: solid;
				border-bottom-width: 1px;
				border-bottom-color: #eee;
			}

			.uni-list-item__content-title {
				font-size: 14px;
			}
		}
	}
</style>